<template>
  <div>
    <el-form
      :inline="true"
      size="mini">
      <el-form-item :label="`已选数据下载 [ ${currentTableData.length} ]`">
        <el-button-group>
          <el-button
            type="primary"
            size="mini"
            :disabled="currentTableData.length === 0"
            @click="handleDownloadXlsx(currentTableData)">
            xlsx
          </el-button>
          <el-button
            type="primary"
            size="mini"
            :disabled="currentTableData.length === 0"
            @click="handleDownloadCsv(currentTableData)">
            csv
          </el-button>
        </el-button-group>
      </el-form-item>
      <el-form-item :label="`已选数据下载 [ ${multipleSelection.length} ]`">
        <el-button-group>
          <el-button
            type="primary"
            size="mini"
            :disabled="multipleSelection.length === 0"
            @click="handleDownloadXlsx(multipleSelection)">
            xlsx
          </el-button>
          <el-button
            type="primary"
            size="mini"
            :disabled="multipleSelection.length === 0"
            @click="handleDownloadCsv(multipleSelection)">
            csv
          </el-button>
        </el-button-group>
      </el-form-item>
    </el-form>

    <el-table
      :data="currentTableData"
      v-loading="loading"
      size="mini"
      stripe
      style="width: 100%;"
      @selection-change="handleSelectionChange">

      <el-table-column
        type="selection"
        width="55">
      </el-table-column>

      <el-table-column label="ID" :show-overflow-tooltip="true">
        <template slot-scope="scope">
          {{scope.row.id}}
        </template>
      </el-table-column>

      <el-table-column label="角色名称" width="80" align="center">
        <template slot-scope="scope">
          {{scope.row.name}}
        </template>
      </el-table-column>

      <el-table-column label="更新时间" align="center">
        <template slot-scope="scope">
          {{dayjs(scope.row.update_at).format('YYYY-MM-DD HH:mm')}}
        </template>
      </el-table-column>

      <el-table-column label="创建时间" :show-overflow-tooltip="true">
        <template slot-scope="scope">
          {{dayjs(scope.row.create_at).format('YYYY-MM-DD HH:mm')}}
        </template>
      </el-table-column>

      <el-table-column label="操作" :show-overflow-tooltip="true" width="320">
        <template slot-scope="scope">
          <el-button type="primary" size="mini" @click="allocatioResources(scope.row)">资源分配</el-button>
          <el-button type="primary" size="mini" @click="allocatioUser(scope.row)">角色分配</el-button>
          <el-button type="primary" size="mini" @click="edit(scope.row)">编辑</el-button>
          <el-button type="danger" size="mini" @click="del(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog :visible.sync="modalResources" draggable scrollable title="资源分配">
      <el-form>
        <el-form-item label="资源选择">
          <el-select v-model="resourceList" multiple placeholder="请选择" style="width:100%">
            <el-option
              v-for="item in allResourceList"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="setResource">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog :visible.sync="modalUser" draggable scrollable title="角色分配">
      <el-form>
        <el-form-item label="用户选择">
          <el-select v-model="userList" multiple placeholder="请选择" style="width:100%">
            <el-option
              v-for="item in allUserList"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="setUser">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getUser, setUser, setResource, roleUser, roleResource } from 'api/role'
import dayjs from 'dayjs'
import { resourceList } from 'api/resource'
import util from '@/libs/util.js'
export default {
  name: 'PageMain',
  props: {
    tableData: {
      default: () => []
    },
    loading: {
      default: false
    }
  },
  data () {
    return {
      roleId: '',
      modalResources: false,
      modalUser: false,
      userList: [],
      resourceList: [],
      allUserList: [],
      allResourceList: [],
      currentTableData: [],
      multipleSelection: [],
      downloadColumns: [
        { label: 'ID', prop: 'id' },
        { label: '角色名称', prop: 'name' },
        { label: '更新时间', prop: 'update_at' },
        { label: '创建时间', prop: 'create_at' }
      ]
    }
  },
  watch: {
    tableData: {
      handler (val) {
        this.currentTableData = val
      },
      immediate: true
    }
  },
  methods: {
    dayjs,
    allocatioResources (row) {
      this.roleId = row.id
      this.roleResource()
      this.modalResources = true
    },
    allocatioUser (row) {
      this.roleId = row.id
      this.roleUser()
      this.modalUser = true
    },
    del (row) {
      this.$emit('del', { id: row.id })
    },
    edit (row) {
      this.$emit('edit', row)
    },
    handleSwitchChange (val, index) {
      const oldValue = this.currentTableData[index]
      this.$set(this.currentTableData, index, {
        ...oldValue,
        type: val
      })
      // 注意 这里并没有把修改后的数据传递出去 如果需要的话请自行修改
    },
    handleSelectionChange (val) {
      this.multipleSelection = val
      this.$emit('changeSel', val)
    },
    downloadDataTranslate (data) {
      return data.map(row => ({
        ...row
      }))
    },
    handleDownloadXlsx (data) {
      this.$export.excel({
        title: '用户列表',
        columns: this.downloadColumns,
        data: this.downloadDataTranslate(data)
      })
        .then(() => {
          this.$message('导出表格成功')
        })
    },
    handleDownloadCsv (data) {
      this.$export.csv({
        title: '用户列表',
        columns: this.downloadColumns,
        data: this.downloadDataTranslate(data)
      })
        .then(() => {
          this.$message('导出CSV成功')
        })
    },
    getUser () {
      let data = {}
      getUser(data).then(res => {
        this.allUserList = [...res]
      }).catch(err => {
        console.log('err', err)
      })
    },
    getResourceList () {
      resourceList({})
        .then(res => {
          this.allResourceList = res.data
        })
        .catch(err => {
          console.log('err', err)
        })
    },
    setUser () {
      let data = { roleId: this.roleId, userList: this.userList }
      setUser(data).then(res => {
        this.modalUser = false
        console.log(res)
      }).catch(err => {
        console.log('err', err)
      })
    },
    setResource () {
      let data = { roleId: this.roleId, resourceList: this.resourceList }
      setResource(data).then(res => {
        this.modalResources = false
        console.log(res)
      }).catch(err => {
        console.log('err', err)
      })
    },
    roleUser () {
      let data = { role_id: this.roleId }
      roleUser(data).then(res => {
        // 去除已删除的人员
        this.userList = util.arrays.intersect(res.data.map(i => i.user_id), this.allUserList.map(i => i.id))
        console.log(this.allUserList.map(i => i.id), this.allUserList)
        // this.userList = res.data.map(i => i.user_id)
        console.log(res)
      }).catch(err => {
        console.log('err', err)
      })
    },
    roleResource () {
      let data = { role_id: this.roleId }
      roleResource(data).then(res => {
        // 去除空资源
        this.resourceList = util.arrays.intersect(res.data.map(i => i.resource_id), this.allResourceList.map(i => i.id))
      }).catch(err => {
        console.log('err', err)
      })
    }
  },
  mounted () {
    this.getUser()
    this.getResourceList()
  }
}
</script>
